<template>
  <el-row :gutter="20">
    <el-col :span="10" style="margin-left: 50px">
      <el-card class="box-card">
        <div slot="header" style="background-color: #409eff; color: white">
          <span style="margin-left: 30px; font-weight: bold">
            <i class="el-icon-circle-plus-outline"></i>
            点击组员头像即可开始评论
          </span>
        </div>

        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-user"></i>
              职员编号：
            </span>
            <!-- <el-input v-model="form.id" style="width: 260px"></el-input> -->
            {{ form.id }}
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-connection"></i>
              职员姓名：
            </span>
            <!-- <el-input v-model="form.name" style="width: 260px"></el-input> -->
            {{ form.name }}
          </el-form-item>

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-bank-card"></i>
              职员岗位：
            </span>
            <!-- <el-input v-model="form.region" style="width: 260px"></el-input> -->
            {{ form.region }}
          </el-form-item>

          <!-- <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-bank-card"></i>
              职员岗位：
            </span>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%"></el-time-picker>
            </el-col>
          </el-form-item>-->

          <el-form-item>
            <span style="margin-left: -80px; font-weight: bold; color: #003d79">
              <i class="el-icon-notebook-2"></i>
              评价内容：
            </span>
            <span>
              出勤天数：
              <el-input
                placeholder="30"
                v-model="form.attendance"
                style="width: 160px; margin-bottom: 15px"
                class="point"
              ></el-input>/30天
            </span>
            <br />
            <span>
              请假天数：
              <el-input
                placeholder="0"
                v-model="form.offs"
                style="width: 160px; margin-bottom: 15px"
                class="point"
              ></el-input>/30天
            </span>
            <br />
            <span>
              迟到天数：
              <el-input
                placeholder="0"
                v-model="form.lates"
                style="width: 160px; margin-bottom: 15px"
                class="point"
              ></el-input>/30天
            </span>
            <br />
            <span>
              早退天数：
              <el-input
                placeholder="0"
                v-model="form.leaveEarly"
                style="width: 160px; margin-bottom: 15px"
                class="point"
              ></el-input>/30天
            </span>
            <br />
            <span>
              旷工天数：
              <el-input
                placeholder="0"
                v-model="form.absenteeism"
                style="width: 160px"
                class="point"
              ></el-input>/30天
            </span>
          </el-form-item>

          <el-form-item>
            <span>
              考勤得分：
              <el-input
                placeholder="请打分 满分100"
                v-model="form.totalScore"
                style="width: 160px; margin-right: 100px"
                class="point"
              ></el-input>
            </span>
            <el-button type="primary" @click="onSubmit">提交评论</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>

    <el-col :span="10" style="margin-left: 50px">
      <el-card class="box-card">
        <div slot="header" style="background-color: #009393; color: white">
          <span style="margin-left: 30px; font-weight: bold">待评价组员</span>
        </div>

        <el-tabs v-model="activeName" @tab-click="handleClick" class="tab" style="height: 600px">
          <el-tab-pane label="A组" name="first">
            <span class="staff" @click="showData('1001', '张琪', '前端')">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left: 30px; font-weight: bolder">
                <b>张琪</b>
              </p>
            </span>
            <span class="staff" @click="showData('1002', '王娜', '后端')">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left: 30px; font-weight: bolder">
                <b>王娜</b>
              </p>
            </span>
            <span class="staff" @click="showData('1003', '赵丽', '测试')">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left: 30px; font-weight: bolder">
                <b>赵丽</b>
              </p>
            </span>
            <img class="calendar" src="../../src/assets/images/日历.png" />
          </el-tab-pane>

          <el-tab-pane label="B组" name="second">
            <span class="staff">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left: 30px; font-weight: bolder">
                <b>王亮</b>
              </p>
            </span>
            <span class="staff">
              <img src="../../src/assets/images/user-one.png" />
              <p style="margin-left: 30px; font-weight: bolder">
                <b>汪芳</b>
              </p>
            </span>
            <img class="calendar2" src="../../src/assets/images/日历2.png" />
          </el-tab-pane>

          <el-tab-pane label="C组" name="third">
            <span class="staff">
              <img src="../../src/assets/images/user-two.png" />
              <p style="margin-left: 30px; font-weight: bolder">
                <b>黄娜</b>
              </p>
            </span>
            <img class="calendar" src="../../src/assets/images/日历.png" />
          </el-tab-pane>
          <el-tab-pane label="D组" name="fourth">
            <span class="staff">
              <img src="../../src/assets/images/user-three.png" />
              <p style="margin-left: 30px; font-weight: bolder">
                <b>孔杰</b>
              </p>
              <img class="calendar2" src="../../src/assets/images/日历2.png" />
            </span>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "StaffAttendance",
  data() {
    return {
      activeName: "first",
      value: new Date(),
      form: {
        id: "请选择员工",
        name: "请选择员工",
        region: "请选择员工",
        attendance: "",
        offs: "",
        lates: "",
        leaveEarly: "",
        absenteeism: "",
        totalScore: "",
      },
    };
  },
  methods: {
    onSubmit() {
      if (this.form.id == "")
        alert("请选择员工")
      else if (
        this.form.attendance == "" ||
        this.form.offs == "" ||
        this.form.lates == "" ||
        this.form.leaveEarly == "" ||
        this.form.absenteeism == ""
      )
        alert("请填写出勤天数")
      else if (this.form.totalScore == "")
        alert("请打分")
      else {
        alert("提交成功")
        console.log("submit!");
        this.reset()
      }
    },
    reset() {
      this.form.id = "请选择员工"
      this.form.name = "请选择员工"
      this.form.region = "请选择员工"
      this.form.attendance = ""
      this.form.offs = ""
      this.form.lates = ""
      this.form.leaveEarly = ""
      this.form.absenteeism = ""
      this.form.totalScore = ""
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    showData(id, name, region) {
      this.form.id = id;
      this.form.name = name;
      this.form.region = region;
    }
  },
};
</script>

<style lang="less" scoped>
.box-card {
  width: 580px;
}
.el-card /deep/ .el-card__header {
  padding: 0;
  line-height: 50px;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.tab {
  height: 400px;
}
.staff {
  float: left;
  margin-right: 15px;
}
.calendar {
  width: 550px;
}
.calendar2 {
  width: 590px;
}
</style>
